<script setup>

import {Edit, Check, Refresh} from "@element-plus/icons";
import {reactive, ref} from "vue";
import request from '@/utils/request'
import router from "@/router";
import {ElMessage} from "element-plus";
//表单引用
const changeuserFormRef=ref()
//表单的数据模型
const changeuserForm=reactive(({
  username:'',
  email:'',
  password:'',
  password1:''
}))
//表单规则
const changeuserRules=reactive({
  password: [
    { required: true, message: '必须填写密码', trigger: 'blur' },
    /*{ min: 6, message: '账号长度至少8位', trigger: 'blur' },*/
    { pattern : /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/ ,
      message: '密码必须是数字和字母相结合，长度至少6位！',
      trigger: 'blur' },
  ],
  password1: [
    { required: true, message: '必须填写密码', trigger: 'blur' },
    /*{ min: 6, message: '账号长度至少8位', trigger: 'blur' },*/
    { pattern : /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/ ,
      message: '密码必须是数字和字母相结合，长度至少6位！',
      trigger: 'blur' },
  ],
})
const nextBtn=()=>{
  changeuserFormRef.value.validate((valid,fields)=>{
    if (valid){
      request({
        url:'http://localhost:8500/sys/user/changepassword',
        method:'PUT',
        data:changeuserForm,
        headers: {
          'content-type':"application/json;charset:UTF-8"
        }
      }).then(req => {
        if (changeuserForm.password!=changeuserForm.password1){
          ElMessage({
            type: 'error',
            message: '两次填写密码不一致！'
          })
        }else {
        if (200 == req.data.errorCode) {
          ElMessage({
            type: 'success',
            message: '修改成功！'
          })
          router.push('/')
        }else {
          ElMessage({
            type: 'error',
            message: '修改失败，请重新检查账号或邮箱！'
          })
        }
        }
      })
    }
  })
}
const turnBtn = () => {
  router.push('forgetpassword')

}
</script>

<template>
  <div class="bg">
  <div class="up">
    <el-row>
      <el-col :span="9" style="margin-top: 30px">
        <div class="up_first">账号安全中心 <el-divider direction="vertical" />
          <span class="up_second">密码管理</span>
        </div>
      </el-col>
      <el-col :span="8"></el-col>
      <el-col :span="7"></el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="18" :offset="6" style="margin-top: 30px">
          <el-steps
              class="mb-4"
              style="max-width: 600px"
              :space="200"
              :active="2"
              simple
          >
            <el-step title="输入账号" :icon="Edit" />
            <el-step title="修改密码" :icon="Refresh" />
            <el-step title="修改成功" :icon="Check" />
          </el-steps>
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="content">
    <div>
      <el-form
          ref="changeuserFormRef"
          :model="changeuserForm"
          :rules="changeuserRules"
          label-width="auto"
          style="margin-left: 40%">
        <el-form-item prop="username" label="账号">
          <el-input v-model="changeuserForm.username"
                    style="width: 300px;
                height: 40px;
                font-weight: bolder;"
                    placeholder="请输入您的账号" />
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-input v-model="changeuserForm.email"
                    style="width: 300px;
                    height: 40px;
                    font-weight: bolder;"
                    placeholder="请输入您的邮箱" />
        </el-form-item>
        <el-form-item prop="password" label="新密码">
          <el-input v-model="changeuserForm.password"
                    style="width: 290px;
                    height: 40px;
                    font-weight: bolder;"
                    placeholder="请输入您的新密码"
                    show-password/>
        </el-form-item>
        <el-form-item prop="password1" label="确认新密码">
          <el-input v-model="changeuserForm.password1"
                    style="width: 270px;
                    height: 40px;
                    font-weight: bolder;"
                    placeholder="请再次输入您的新密码"
                    show-password/>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 30px">
      <el-button
          style="width: 150px;
          height: 40px;
          margin-left:90px;"
          type="primary"
          @click="turnBtn">
        上一步
      </el-button>
      <el-button
          style="width: 150px;
          height: 40px;
          margin-left:90px;"
          type="primary"
          @click="nextBtn">
        下一步
      </el-button>
    </div>
  </div>

  </div>
</template>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background-image: url("../assets/imgs/bgimg.jpg");
  background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
  position: absolute; /* 不可缺少 */
  z-index: -1;
  background-repeat: no-repeat;
}
.up_first{
  font-size: 25px;
  font-weight: bolder;
}
.up_second{
  font-size: 20px;
}
.content{
  margin-top: 10px;
  margin-left: 30px;
}
.content{
  margin-top: 80px;
}
</style>